<template>
  <div class="main">
    <div class="cinemas-search">
      <div class="cinemas-search-input">
        <div class="input-wrap onFocus">
          <!-- <i class="search-icon iconfont icon-sousuo-sousuofangdajing"></i> -->
          <van-icon name="search" />
          <form action=".">
            <input @input="changevalue" v-model="inputtext" type="text" placeholder="请输入影院、电影名称" class="search-input">
          </form>
          <div class="clean-icon">
            <i @click="restvalue" v-show="ishow" class="van-icon van-icon-clear van-field__clear"></i>
          </div>
        </div>
        <div class="cancel-btn" @click="goback">取消</div>
      </div>
    </div>
    <!-- <div v-show="area" :style="height" class="cinema-init-area">
      <div class="cinema-nearby init-list">
        <div class="cinema-index-title">离你最近</div>
        <ul class="cinema-index-detail">
          <li class="cinema-item-detail">
            <div class="cinema-item-text">北京米瑞酷影城（平谷店）</div>
          </li>
          <li class="cinema-item-detail">
            <div class="cinema-item-text">北京城（平谷店）</div>
          </li>
          <li class="cinema-item-detail">
            <div class="cinema-item-text">北京米城（平谷店）</div>
          </li>
          <li class="cinema-item-detail">
            <div class="cinema-item-text">北京米（平谷店）</div>
          </li>
          <li class="cinema-item-detail">
            <div class="cinema-item-text">北京米瑞酷）</div>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="cinema-search-result">
      <div v-show="empty" class="empty-result">
        <img src="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png" alt="">
        <p>没有找到匹配的影院</p>
        <p class="">提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
      </div>
      <div v-show="result" class="cinema-search-result-list">
        <ul >
          <li  v-for=" (searchcity,index) in finallycity" :key="index" class="cinema-search-result-item">
            <a href="javascript:void(0)" class="cinema-item-wrap">
              <div class="cinema-info-lf cinema-info">
                <span class="cinema-name">{{searchcity.name}}</span>
                <span class="cinema-address">{{searchcity.address}}</span>
              </div>
              <div class="cinema-info-rt cinema-info">
                <div class="">
                <span class="cinema-lowPrice price-fmt">
                  <i>￥</i>
                  <span class="interge" style="font-size: 15px;">{{searchcity.lowPrice/100}}</span>
                  <span class="" style='display: none;'></span>
                  <span class="decimal" style="font-size: 15px;"></span>
                  <span class="" style='display: none;'></span>
                  <span class="decimal" style="font-size: 15px; display: none;">00</span>
                </span>
                <span class="upon">起</span>
                </div>
                <span class="cinema-gpsAddress">{{searchcity.Distance | Distancefilter}}km</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style scoped>
.main, body {
    height: 100%;
}
.cinema-gpsAddress {
    width: 65px;
    text-align: right;
}
.cinemas-search {
    /* min-height: 100vh; */
    color: #191a1b;
}
.cinemas-search .cinemas-search-input {
    z-index: 3005;
    height: 49px;
    width: 100vw;
    padding: 9.5px 15px;
    background-color: #fff;
    position: fixed;
}
.cinemas-search .cinemas-search-input .onFocus {
    width: calc(100% - 43px) !important;
}
.cinemas-search .cinemas-search-input .cancel-btn {
    width: 43px;
    position: absolute;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    line-height: 30px;
}
input {
  font: 12px/1.5 Tahoma,Helvetica,Arial,sans-serif;
    font-family: Microsoft YaHei,Tahoma,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    color: #2c3e50;
}
div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.icon-sousuo-sousuofangdajing:before {
    content: "\e62f";
}
.cinemas-search .cinemas-search-input .input-wrap {
    background-color: #f4f4f4;
    position: relative;
    display: inline-block;
    border-radius: 3px;
    width: 100%;
    height: 30px;
}
.cinemas-search .cinemas-search-input .input-wrap .search-icon {
    position: absolute;
    left: 7px;
    top: 0;
    line-height: 30px;
    font-size: 21px;
    color: #797d82;
}
form {
    display: block;
    margin-top: 0em;
}
.cinemas-search .cinemas-search-input .input-wrap .clean-icon {
    position: absolute;
    right: 7px;
    top: 0;
    line-height: 30px;
    font-size: 21px;
    color: #797d82;
}
.cinemas-search .cinemas-search-input .input-wrap .search-input {
    position: absolute;
    left: 33.5px;
    top: 0;
    height: 30px;
    width: calc(100% - 65px);
    border: 0;
    background: #f4f4f4;
}
.cinemas-search .cinemas-search-input:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.van-icon-search{
  position: absolute;
    left: 10px;
    top: 0;
    line-height: 30px;
    font-size: 16px;
    color: #797d82;
}
/* .van-icon-clear{

} */
.cinema-init-area {
    z-index: 3000;
    padding-top: 49px;
    /* min-height: 100vh; */
    background-color: #fff;
}
.cinema-init-area .init-list {
    padding: 0 15px 8px 0;
    margin-left: 15px;
    position: relative;
}
 .cinema-init-area .init-list .cinema-index-title {
    font-size: 13px;
    line-height: 13px;
    color: #bdc0c5;
    margin: 18px 0;
}
.cinema-init-area .init-list .cinema-index-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cinemas-search ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cinema-init-area .init-list:first-child:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.cinemas-search ul:after, .cinemas-search ul:before {
    content: "";
    display: table;
}
.cinema-item-detail {
    /* width: 50%; */
    text-align: center;
    padding-bottom: 10px;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}
 .cinema-item-detail .cinema-item-text {
    height: 30px;
    background-color: hsla(0,0%,95.7%,.6);
    line-height: 14px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px 12px;
}
.cinema-index-detail:after {
    clear: both;
}
.empty-result {
    position: absolute;
    top: 107px;
    width: 100%;
    text-align: center;
}
.empty-result img {
    width: 90px;
    margin: auto;
    
}
.empty-result p {
    color: #bdc0c5;
    font-size: 14px;
    margin: 0;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.empty-list-tip {
    font-size: 11px;
    padding: 0 22vw;
}
.cinema-search-result {
    z-index: 3004;
    position: absolute;
    top: 49px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    height: calc(100vh - 49px);
    width: 100vw;
    overflow-y: auto;
}
.cinema-search-result-list ul {
    padding-left: 15px;
}
 .cinema-search-result-list ul:before {
    content: "";
    display: table;
}
.cinema-search-result-list li {
    height: 45px;
    position: relative;
    background-color: #fff;
    padding: 15px 0;
    padding-top: 8px;
}
.cinema-item-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.cinema-search-result-item:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.cinema-info-lf {
    width: calc(100% - 65px);
    text-align: left;
}
.cinema-info-rt {
    width: 65px;
    text-align: right;
}
.cinema-name {
    color: #191a1b;
    font-size: 15px;
}
.cinema-info-lf span {
    display: block;
    width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cinema-info-lf .cinema-address {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
}
.cinema-gpsAddress {
    display: block;
    font-size: 11px;
    color: #797d82;
    margin-top: 5px;
}
.price-fmt, .price-fmt span {
    float: none!important;
}
.price-fmt {
    font-size: 15px;
    color: #ff5f16;
    height: 0!important;
    display: inline-table!important;
}
 .upon {
    color: #ff5f16;
    font-size: 10px;
}
.price-fmt i {
    font-size: 11px;
    font-style: normal;
}
</style>
<script>
import ItemToplogo from './ItemToplogo.vue'
import { Search, Toast } from 'vant'
import Vue from 'vue';
import { Icon } from 'vant';
import { mapState,mapMutations, mapActions } from 'vuex';
Vue.use(Icon);
// Vue.directive('child',(el,al)=>{
//   if(el.firstChild===null){
//   al.value=true
//   }
// console.log(el,al.value)
// })
Vue.use(Search).use(Toast)
Vue.filter('Distancefilter', (Distance) => {
  return ((Distance) * 10000 + '').slice(0, 4)
})
export default {
  data () {
    return {
      value: '',
      lists: [],
      height: '',
      inputtext:'',
      ishow: false,
      area: true,
      empty: false,
      result: true
    }
  },
  // directives:{
  //      child:{
  //        bind(el,al){
  //          console.log(el.firstChild)
  //        }
  //      }
  // },
  computed: {
    finallycity () {
      if (this.inputtext === ''){
        this.empty = true
        return []
      }else{
        this.empty = false
      }
      if(this.cinemalist.filter(item=>item.name.toUpperCase().includes(this.inputtext.toUpperCase()) || item.address.toUpperCase().includes(this.inputtext.toUpperCase())).length===0){
        this.empty = true
      }
      return this.cinemalist.filter(item=>item.name.toUpperCase().includes(this.inputtext.toUpperCase()) || item.address.toUpperCase().includes(this.inputtext.toUpperCase()))
    },
    ...mapState('City',['Cityid']),
    ...mapState('Cinemalist',['cinemalist']),
    
    // filtercity () {

    // }
  },
  methods: {
    onSearch (val) {
      console.log(val)
      Toast(val)
    },
    onCancel () {
      this.$router.back()
    },
    changevalue (el) {
      this.inputtext = el.target.value
      if (this.inputtext.length > 0) {
        this.ishow = true
        this.area = false
        // this.result = true
      }else {
        this.ishow = false
        this.area = true
        // this.re sult = false
      }
    },
    restvalue () {
      this.inputtext = ''
      this.ishow = false
    },
    goback () {
      this.$router.back()
    },
    ...mapMutations('Showhidebar',['toplogohide','topbarhide','buttomhide','toplogoshow','topbarshow','buttomshow']),
    ...mapActions('Cinemalist',['getcinemalist'])
  },
  mounted () {
    // if(this.inputtext.length===0){
    //   this.empty=true
    // }
    this.height = 'height' + ':' + document.documentElement.clientHeight + 'px'
    // console.log(this.height)
    if (this.cinemalist.length === 0) {
      this.getcinemalist(this.Cityid)
    } else {
      // console.log(222222222222222)
    }
    // this.$store.commit('toplogohide')
    // this.$store.commit('topbarhide')
    // this.$store.commit('buttomhide')
    this.toplogohide()
    this.topbarhide()
    this.buttomhide()
  },
  beforeDestroy () {
    // this.$store.commit('toplogoshow')
    // this.$store.commit('topbarshow')
    // this.$store.commit('buttomshow')
    this.toplogoshow()
    this.topbarshow()
    this.buttomshow()
  },
  components: {
    ItemToplogo
  }
}
</script>
